import React from "react"

interface StatItem {
  label: string
  value: string | number
}

interface StatGroupProps {
  stats: StatItem[]
}

const StatGroup: React.FC<StatGroupProps> = ({ stats }) => {
  return (
    <div className="flex justify-between flex-wrap gap-2 sm:gap-4 mt-4 w-full">
      {stats.map((item) => (
        <div
          key={item.label}
          className="flex flex-col items-center min-w-[60px] sm:min-w-[80px] flex-1"
        >
          <span className="text-sm sm:text-base font-bold text-black">
            {item.value}
          </span>
          <span className="text-xs sm:text-sm text-gray-500 mt-1">
            {item.label}
          </span>
        </div>
      ))}
    </div>
  )
}

export default StatGroup
